<template>
    <div>
        <div
            class="mainBody"
        >
            <Content>
                <template slot="left">
                    <content-one title="所有文章">
                        <template slot="content">
                            <latest-articles
                                :article-list="latestList"
                                :type="pathName"
                            ></latest-articles>
                        </template>
                    </content-one>
                    <Page
                        :total="total"
                        @onPageChange="onPageChange"
                        @onPageSizeChange="onPageSizeChange"
                    ></Page>
                </template>
                <template slot="right">
                    <click-rank
                        :article-list="clickRankList"
                        :type="pathName"
                    ></click-rank>
                    <wechat-attention></wechat-attention>
                </template>
            </Content>
        </div>
        <router-view></router-view>
    </div>
</template>

<script>
    import Content from 'cmpts/Content';
    import ContentOne from 'cmpts/ContentOne';
    import LatestArticles from 'cmpts/LatestArticles';
    import WechatAttention from 'cmpts/WechatAttention';
    import ClickRank from 'cmpts/ClickRank';
    import Page from 'cmpts/Page';
    import { searchArticleForType } from 'assets/js/api';
    export default {
        components: {
            Content,
            ContentOne,
            LatestArticles,
            WechatAttention,
            ClickRank,
            Page
        },
        data () {
            return {
                clickRankList: [], // 点击排行数据
                pageSize: 20, // 每页条数
                pageNum: 1, // 页码
                total: 0, // 总条数
                latestList: [], // 所有文章数据
                articleType: '', // 文章类型，用于到后台查该类型数据
                pathName: '' // 路由 path，用于查看详情拼接在路由中
            };
        },
        watch: {
            '$route' () {
                this.getArticleData();
            }
        },
        mounted () {
            this.getArticleData();
        },
        methods: {
            /**
             * 获取文章列表数据
             */
            getArticleData () {
                this.pathName = this.$route.path;
                this.articleType = this.$route.params.types;
                this.getClickRankList();
                this.getAllArticleList();
            },
            /**
             * 页码改变事件
             * @param {Number} page 当前页码
             */
            onPageChange (page) {
                this.pageNum = page;
                this.getAllArticleList();
            },
            /**
             * 每页条数改变事件
             * @param {Number} pageSize 当前选择的每页条数
             */
            onPageSizeChange (pageSize) {
                this.pageSize = pageSize;
                this.getAllArticleList();
            },
            /**
             * 获取文章列表
             * @param {Object} paramsJson 参数
             */
            searchArticleForType (paramsJson) {
                return new Promise((resolve, reject) => {
                    searchArticleForType(paramsJson).then(res => {
                        if (!res.status) {
                            reject(res.msg);
                        }
                        resolve(res.data);
                    });
                });
            },
            // 获取当前页 点击排行 数据
            getClickRankList () {
                this.searchArticleForType({
                    type: this.articleType
                }).then(res => {
                    this.clickRankList = res.list;
                }).catch(error => {
                    this.$Message.info(error);
                });
            },
            /**
             * 获取该类型下所有文章
             */
            getAllArticleList () {
                let paramsJson = {
                    pageSize: this.pageSize,
                    pageNum: this.pageNum,
                    type: this.articleType
                };
                this.searchArticleForType(paramsJson).then(res => {
                    this.latestList = res.list;
                    this.total = res.total;
                }).catch(error => {
                    this.$Message.info(error);
                });
            }
        }
    };
</script>
<style lang="less" scoped>
</style>
